<template>
  <el-dialog
    v-model="visible"
    title="Shipping address"
    :before-close="() => close()"
  >
    <el-form :model="form">
      <el-form-item label="账号">
        <el-input v-model="form.username" autocomplete="off" />
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="form.nickName" autocomplete="off" />
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="form.email" autocomplete="off" />
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="form.password" autocomplete="off" />
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="form.note" autocomplete="off" />
      </el-form-item>
      <el-form-item label="是否启用">
        <el-radio-group v-model="form.status" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ElMessage } from "element-plus";
import { ref, reactive, watch } from "vue";
import { umsAdmin } from "../../../../request/http";

const props = withDefaults(
  defineProps<{
    visible: boolean;
    formData: AdminResDataObj;
  }>(),
  {
    visible: false,
    formData: () => ({} as AdminResDataObj),
  }
);

const emit = defineEmits<{
  (event: "close", r?: "reload"): void;
}>();

const form = ref({} as AdminResDataObj);
watch(
  () => props.formData, // ref, reactive, effect/getter
  (val) => {
    form.value = { ...val };
  }
);

// 确定按钮
async function submit() {
  let res;
  let msg;
  if (form.value.id) {
    res = await umsAdmin.updateAdmin(form.value);
  } else {
    res = await umsAdmin.registerAdmin(form.value);
  }

  if (res.code === 200) {
    // 关闭和更新表格数据
    close("reload");
    // 提示
    ElMessage({
      message: msg,
      type: "success",
    });
    //
  }
}

function close(r?: "reload") {
  //   console.log("close方法", r);
  // 关闭弹框
  emit("close", r);
}
</script>
